<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="申请人">
					<el-input v-model="filters.Applicant" placeholder="申请人"></el-input>
				</el-form-item>
				<el-form-item label="申请状态">
					<el-select v-model="filters.Status" placeholder="请选择申请状态">
						<el-option v-for="item in allStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fnGetMyApplys">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--我的申请列表-->
		<el-table :data="myApply" border v-loading="myApplyLoading" class="my-apply-list">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="Category" label="申请类型" width="100">
			</el-table-column>
			<el-table-column prop="Applicant" label="申请人" width="100">
			</el-table-column>
			<el-table-column prop="VisitorDept" label="来访单位" width="250">
			</el-table-column>
			<!--<el-table-column prop="VisitorNames" label="来访人员" width="250" :formatter="fnVisitorFormat">-->
			<!--</el-table-column>-->
			<!--<el-table-column prop="VisitorLevel" label="级别" width="90">-->
			<!--</el-table-column>-->
			<el-table-column label="用餐时间" min-width="150">
				<template scope="scope">
					<p>{{scope.row.VisitDate | moment}} {{scope.row.MealType}}</p>
				</template>
			</el-table-column>
			<el-table-column prop="MealNum" label="用餐人数" width="100" :formatter="fnMealNumFormat">
			</el-table-column>
			<el-table-column prop="Room" label="用餐地点" width="100">
			</el-table-column>
			<el-table-column prop="Price" label="用餐标准" width="100" :formatter="fnPriceFormat">
			</el-table-column>
			<el-table-column prop="Status" label="状态" width="90">
			</el-table-column>
			<el-table-column label="操作" width="80" fixed="right">
				<template scope="scope">
					<el-button size="small" @click="fnSignoff(scope.row.ID)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
    import Svc from '../service/index.js'
	export default {
		data() {
			return {
				allStatus:[{
                    label:'全部',
                    value:99
                },{
					label:'待审核',
					value:0
				},{
					label:'待签收',
					value:1
				},{
					label:'已签收',
					value:3
				},{
                    label:'已驳回',
                    value:2
                }],
				filters:{
					Applicant : '',
					Status:99
				},
				total:0,
				skip:0,
				size:20,
				myApplyLoading:false,
				myApply:[]
			}
		},
		methods: {
			//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //格式化->时间
            fnDateFormat(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == "") {  
	             	return "------";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD");  
            },
            //格式化->来访人员
            fnVisitorFormat(row, column){
            	var list = row[column.property] || [];
            	var res = ''
            	for (var i=0;i<list.length;i++) {
            		if (i == list.length-1) {
            			res += list[i]
            			continue
            		}
            		res += list[i] + "、"
            	}
            	return res
            },
            //格式化->餐费
            fnPriceFormat(row, column){
                var val = row[column.property];  
	          	return val + "元"; 
            },
            //格式化->用餐人数
            fnMealNumFormat(row, column){
                var val = row[column.property];  
	          	return val + "人"; 
            },
            //分页
			fnPaginationChange(val) {
				this.skip = val-1;
				this.fnGetMyApplys();
			},
			//获取我的申请列表
			fnGetMyApplys : function() {
				var that = this
				that.myApplyLoading = true
				//skip代表数据下标，从0开始
				var params = {
					Skip: that.skip*that.size,
					Size: that.size,
					Applicant:that.filters.Applicant,
					Status:that.filters.Status
				};
				
				var user = sessionStorage.getItem('user');
				if (user) {
					user = JSON.parse(user);
					params.EmpID = user.EmployeeID || '';
				}
				
	            Svc.fnPostData('/api/meal/myapply',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.myApply = res.body.Data.List
	            		that.total = res.body.Data.Total
	            		that.myApplyLoading = false
	            	} else {
	            		that.openMessage("我的申请列表获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
			//查看详情
			fnSignoff(applyID){
				this.$router.push({ path: '/mealmanagement',query:{'applyID':applyID,'taskID':0,'hasList':false,'pageType':'/myapply'}});
			}
		},
		mounted() {
			//获取我的申请列表
            this.fnGetMyApplys()
		}
	}
</script>

<style scoped>
	.my-apply-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
</style>